<div class="container-fluid">

  <div class="row">
    <div class="col-md-4"></div>
    <div class="col-md-4 col-sm-12">
      <div class="card mt-4 border-0">
        <img src="/static/img/login-pic.jpg" class="card-img-top d-block d-lg-none" alt="">
        <div class="card-body">
          <form>
            <div class="form-group">
              <p class="h5 text-center">登录 / SIGN IN</p>
              <input type="hidden" id="f" name="f" value="{{.TO_URL}}" />
            </div>
            <div class="form-group">
              <label for="user_login">帐号</label>
              <input type="text" class="form-control" id="user_login" placeholder="帐号">
            </div>
            <div class="form-group">
              <label for="user_password">密码</label>
              <input type="password" class="form-control" id="user_password" placeholder="密码">
            </div>
            <div class="form-group">
              <label for="user_password">验证码</label>
              <img id="captcha_img" height="50" width="100%" src="{{.CaptchaPath}}" title="看不清，点击验证码可变更" />
              <input autocomplete="off" type="text" class="form-control" id="user_captcha" placeholder="验证码">
            </div>
            <div class="form-group text-center py-4">
              <button type="button" id="loginButton" class="btn btn-primary mr-2">立即登录</button>
              <a href="/login/register" class="btn btn-secondary ml-2">没有账号，现在 -> 注册</a>
              <p class="mt-4" style="font-size: 0.9rem;">
                <a href="/" target="_self">游客访问，返回首页</a>
              </p>
            </div>
          </form>
        </div>
      </div>
    </div>
    <div class="col-md-4"></div>
  </div>
</div>

<script>
  document.addEventListener('DOMContentLoaded', function () {
    var g_path = '{{.CaptchaPath}}';
    var g_id = '{{.CaptchaId}}'

    $("#user_captcha").on("keyup", function (e) {
      if (e.keyCode == 13) {
        $("#loginButton").click();
      }
    })

    $("#captcha_img").on("click", function () {
      var path = g_path;
      path += '?t=' + new Date().getTime()
      $("#captcha_img").attr("src", path);
    });
    $("#loginButton").on("click", function () {
      var usercode = $("#user_login").val();
      var userpass = $("#user_password").val();
      var usercapt = $("#user_captcha").val();
      if (usercode.length == 0) {
        alert('请输入帐号');
        return;
      }
      if (userpass.length == 0) {
        alert('请输入密码');
        return;
      }
      if (usercapt.length == 0) {
        alert('请输入验证码');
        return;
      }
      $.post("/pub/login", {
        usercode: usercode,
        userpass: userpass,
        usercapt: usercapt,
        captcha_id: g_id,
      }, function (json) {
        if (json.flag) {
          window.location.replace("{{ .FromUri }}");
        } else {
          if (json.capt) {
            g_path = json.capt.path;
            g_id = json.capt.id;
            $("#captcha_img").attr("src", g_path);
          }
          alert(json.msg);
        }
      });
    });
  });
</script>